<template>
    <div class="article-detail" v-loading="loading">
        <div class="article-container">
            <!-- 文章封面 -->
            <div class="article-cover" v-if="article.cover">
                <img :src="article.cover" :alt="article.title">
            </div>

            <!-- 文章标题 -->
            <h1 class="article-title">{{ article.title }}</h1>

            <!-- 文章信息 -->
            <div class="article-info">
                <div class="author-info">
                    <el-avatar :size="40" :src="article.avatar"></el-avatar>
                    <span class="author-name">{{ article.nickName || '匿名用户' }}</span>
                </div>
                <div class="article-meta">
                    <span class="info-item">
                        <i class="el-icon-time"></i>
                        {{ article.createTime }}
                    </span>
                    <span class="info-item">
                        <i class="el-icon-view"></i>
                        {{ article.viewsNum || 0 }} 阅读
                    </span>
                    <span class="info-item">
                        <i class="iconfont icon-dianzanliang"></i>
                        {{ article.likeNum || 0 }} 点赞
                    </span>
                    <span class="info-item">
                        <i class="el-icon-star-off"></i>
                        {{ article.collectNum || 0 }} 收藏
                    </span>
                </div>
            </div>

            <!-- 文章内容 -->
            <div class="article-content">
                {{ article.content }}
            </div>

            <!-- 文章标签 -->
            <div class="article-tags" v-if="article.tags">
                <el-tag v-for="tag in tagList" :key="tag" size="small" class="tag-item" effect="plain">
                    {{ tag }}
                </el-tag>
            </div>

            <!-- 文章操作栏 -->
            <div class="article-actions">
                <el-button type="primary" plain icon="el-icon-thumb" @click="handleLike" :disabled="!isLogin">
                    点赞 {{ article.likeNum || 0 }}
                </el-button>
                <el-button type="success" plain icon="el-icon-star-off" @click="handleCollect" :disabled="!isLogin">
                    收藏 {{ article.collectNum || 0 }}
                </el-button>
            </div>
        </div>
        <div class="comment-container">
            <h3 class="comment-title">评论区</h3>
            <div class="comment-input-container">
                <div class="input-wrapper">
                    <el-form :model="commentForm2" :rules="commentRules" ref="commentForm">
                        <el-form-item prop="content">
                            <el-input type="textarea" v-model="commentForm2.content" :rows="2" placeholder="请输入您的评论内容"
                                class="custom-textarea">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <el-button type="primary" class="comment-button" @click="submitComment">发表评论</el-button>
            </div>
            <div v-if="comments == null || comments.length === 0" class="empty-comment">
                <el-empty description="暂无评论"></el-empty>
            </div>
            <div v-for="(comment, index) in comments" :key="index" class="comment-item">
                <div class="comment-header">
                    <div class="user-info">
                        <el-avatar :size="40" :src="comment.avatar"></el-avatar>
                        <div class="user-details">
                            <span class="user-name">{{ comment.nickname }}</span>
                        </div>
                    </div>
                    <div>
                        <span class="comment-time">{{ comment.createTime }}</span>
                    </div>
                </div>
                <div class="comment-content">
                    <p class="comment-text">{{ comment.content }}</p>
                    <div class="comment-footer">
                        <div class="comment-actions">
                            <span class="action-item">
                                <i class="iconfont icon-dianzanliang like-icon"
                                    @click="handleCommentLike(comment.id)"></i>
                                <span>{{ comment.likeNum }}</span>
                            </span>
                            <span class="action-item">
                                <i class="el-icon-chat-dot-round" @click="replyComment(comment.id)"></i>
                                <span>{{ comment.replies }}</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div v-for="(reply, cindex) in comment.childList" :key="cindex" class="child-comment">
                    <div class="comment-header">
                        <div class="user-info">
                            <el-avatar :size="40" :src="reply.avatar"></el-avatar>
                            <div class="user-details">
                                <span class="user-name">{{ reply.nickname }}</span>
                                <span style="margin: 0 10px;">回复</span>
                                <span>{{ reply.replyNickname }}</span>
                            </div>
                        </div>
                        <div>
                            <span class="comment-time">{{ reply.createTime }}</span>
                        </div>
                    </div>
                    <div class="comment-content">
                        <p class="comment-text">{{ reply.content }}</p>
                        <div class="comment-footer">
                            <div class="comment-actions">
                                <span class="action-item">
                                    <i class="iconfont icon-dianzanliang like-icon"
                                        @click="handleCommentLike(reply.id)"></i>
                                    <span>{{ reply.likeNum }}</span>
                                </span>
                                <span class="action-item">
                                    <i class="el-icon-chat-dot-round" @click="replyComment(reply.id)"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination-container">
                <el-pagination @size-change="handleCommentSizeChange" @current-change="handleCommentCurrentChange"
                    :current-page="commentPageNum" :page-size="commentPageSize" layout="prev, pager, next"
                    :total="commentTotal">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="回复评论" :visible.sync="replyCommentVisible" width="50%" custom-class="comment-dialog">
            <el-form :model="commentForm" :rules="commentRules" ref="commentForm" label-width="100px">
                <el-form-item label="评论内容" prop="content">
                    <el-input type="textarea" v-model="commentForm.content" :rows="4" placeholder="请输入您的评论内容">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="replyCommentVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitComment">发 表</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getArticleInfo, reqCollectAdd, reqLikeRecordAdd, getCommentList, getCommentSubmit } from "@/api";

export default {
    name: "ArticleDetail",
    data() {
        return {
            loading: false,
            article: {},
            tagList: [],
            isLogin: false,
            commentPageNum: 1,
            commentPageSize: 5,
            commentTotal: 0,
            comments: [],
            commentForm: {
                content: null,
                articleId: this.$route.params.id
            },
            commentForm2: {
                content: null,
                articleId: this.$route.params.id
            },
            replyCommentVisible: false,
            commentRules: {
                content: [
                    { required: true, message: '请输入评价内容', trigger: 'blur' },
                    { min: 5, max: 500, message: '评价内容长度在 5 到 500 个字符', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.isLogin = localStorage.getItem('userInfo') ? true : false;
        this.getArticleDetail();
        this.getComments();
    },
    methods: {
        getArticleDetail() {
            this.loading = true;
            const articleId = this.$route.params.id;
            getArticleInfo(articleId).then(response => {
                this.article = response.data;
                if (this.article.tags) {
                    this.tagList = this.article.tags.split(',');
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        },
        handleLike() {
            reqLikeRecordAdd({
                targetId: this.article.id,
                type: 1
            }).then(response => {
                if (response.data == 1) {
                    this.$message.success('点赞成功');
                } else {
                    this.$message.error('取消点赞');
                }
            }).catch(error => {
            });
        },
        handleCommentLike(id) {
            reqLikeRecordAdd({
                targetId: id,
                type: 2
            }).then(response => {
                if (response.data == 1) {
                    this.$message.success('点赞成功');
                } else {
                    this.$message.error('取消点赞');
                }
            }).catch(error => {
            });
        },
        handleCollect() {
            reqCollectAdd({
                articleId: this.article.id,
            }).then(response => {
                if (response.data == 1) {
                    this.$message.success('收藏成功');
                } else {
                    this.$message.error('取消收藏');
                }
            }).catch(error => {
            });
        },
        handleShare() {
            // 实现分享功能
            this.$message.success('分享链接已复制到剪贴板');
        },
        async getComments() {
            try {
                getCommentList({
                    articleId: this.$route.params.id,
                    pageNum: this.commentPageNum,
                    pageSize: this.commentPageSize
                }).then(resp => {
                    this.comments = resp.rows
                    this.commentTotal = resp.total
                })
            } catch (error) {
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getRoomList()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getRoomList()
        },
        handleCommentSizeChange(val) {
            this.commentPageSize = val
            this.getComments()
        },
        handleCommentCurrentChange(val) {
            this.commentPageNum = val
            this.getComments()
        },
        replyComment(id) {
            this.commentForm = {
                pId: id,
                content: null,
                articleId: this.$route.params.id,
            }
            this.replyCommentVisible = true
        },
        async submitComment() {
            try {
                await this.$refs.commentForm.validate()
                getCommentSubmit(this.replyCommentVisible ? this.commentForm : this.commentForm2).then(resp => {
                    this.$message.success('评价发表成功')
                    this.commentDialogVisible = false
                    this.replyCommentVisible = false
                    this.getComments()
                }).catch(err => {
                })
            } catch (error) {

            }
        },
    }
};
</script>

<style scoped>
.article-detail {
    padding: 20px;
    background: #f5f7fa;
    min-height: calc(100vh - 84px);
}

.article-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
    transition: all 0.3s ease;
}

.article-container:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.child-comment {
    padding-left: 30px;
}

.article-cover {
    margin: -30px -30px 30px -30px;
    height: 400px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-title {
    font-size: 32px;
    color: #303133;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
}

.article-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}

.like-icon {
    font-size: 13px;
    cursor: pointer;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-name {
    font-size: 16px;
    color: #303133;
    font-weight: 500;
}

.article-meta {
    display: flex;
    gap: 20px;
}

.info-item {
    color: #909399;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-item i {
    font-size: 16px;
}

.article-content {
    line-height: 1.8;
    color: #303133;
    font-size: 16px;
    margin-bottom: 30px;
    white-space: pre;
    white-space: pre-wrap;
}

.article-content :deep(p) {
    margin-bottom: 1.5em;
}

.article-content :deep(img) {
    max-width: 100%;
    border-radius: 4px;
    margin: 1em 0;
}

.article-tags {
    margin: 30px 0;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

.tag-item {
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 15px;
    height: 28px;
    line-height: 26px;
    border-radius: 14px;
    transition: all 0.3s ease;
}


.article-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

.article-actions .el-button {
    padding: 12px 25px;
    font-size: 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.article-actions .el-button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-container {
    max-width: 900px;
    margin: 20px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.comment-title {
    font-size: 20px;
    color: #303133;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .article-container {
        padding: 20px;
    }

    .article-cover {
        margin: -20px -20px 20px -20px;
        height: 250px;
    }

    .article-title {
        font-size: 24px;
    }

    .article-info {
        flex-direction: column;
        gap: 15px;
    }

    .article-meta {
        flex-wrap: wrap;
        justify-content: center;
    }

    .article-actions {
        flex-wrap: wrap;
    }
}

.comment-item {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    transition: all 0.3s;
    color: #909399;
    font-size: 12px;
}

.comment-item:hover {
    background-color: #f5f7fa;
}

.comment-text {
    margin: 10px 0;
    color: #606266;
    line-height: 1.6;
}

.comment-images {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.comment-image {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    cursor: pointer;
}

.comment-footer {
    margin-top: 10px;
}

.comment-actions {
    display: flex;
    gap: 15px;
    justify-content: right;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.user-info {
    display: flex;
    align-items: center;
}

.user-details {
    margin-left: 10px;
}

.user-name {
    font-weight: bold;
    color: #303133;
}

.comment-input-container {
    display: flex;
    gap: 15px;
}

.input-wrapper {
    flex: 1;
}

.custom-textarea :deep(.el-textarea__inner) {
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
}

.custom-textarea :deep(.el-textarea__inner:focus) {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.comment-button {
    height: 70px;
    padding: 0 25px;
    font-size: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #409eff, #36d1dc);
    border: none;
}

.comment-button:hover {
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.comment-button:active {
    transform: translateY(0);
}
</style>